<template>
  <div class="form-single-fragment" style="position: relative">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" size="mini" label-position="right">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务名称" prop="taskName">
            <el-input class="input-item" v-model="ruleForm.taskName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属业务" prop="businessType">
            <el-cascader v-model="businesstypeId" ref="ref_business" :options="businesstypeTree" :props="businesstProps"
              :show-all-levels="false" @change="businessChange"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务阶段" prop="businessStage">
            <el-select v-model="ruleForm.businessStage" placeholder="请选择" @change="loadStagewWidgetData">
              <el-option label="商机阶段" :value="1"></el-option>
              <el-option label="立项阶段" :value="2"></el-option>
              <el-option label="合同阶段" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="工作流程" prop="businessFlowId">
            <el-select v-model="ruleForm.businessFlowId" placeholder="请选择">
              <el-option v-for="(item, index) in flowEntrylist" :key="index" :label="item.flowName"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="是否为核心任务" prop="achievementFlag">
            <el-radio-group v-model="ruleForm.achievementFlag">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否审批" prop="examine">
            <el-radio-group v-model="ruleForm.examine">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="this.ruleForm.examine === 1">
          <el-form-item  label="审批流" style="padding-top: 20px">
            <approver :typeId="3"  :approverList="ruleForm.approver" :role="true" @handleChooseapprover="handleChooseapprover"/>
        </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="抄送人" style="padding: 20px 0">
            <approverUserCc :typeId="3"  :approverList="ruleForm.userCcList" :isCc="true" @handleChooseapprover="handleChooseapproverUserCc"/>
            <approverRoleCc :typeId="3"  :approverList="ruleForm.roleCcList" :isCc="true" :role="true" @handleChooseapprover="handleChooseapproverRoleCc"/>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="是否产生成果文件" prop="achievementFlag">
            <el-radio-group v-model="ruleForm.achievementFlag" :disabled="isDisableGeneFlie">
              <el-radio :label="1">产生</el-radio>
              <el-radio :label="0">不产生</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="12">
          <el-form-item label="成果文件" prop="achievementFileName" :hidden="hideAchievementFileName"  :rules="ruleForm.achievementFlag===1 ? rules.achievementFileName:[{ required: false}]">
            <el-input class="input-item" v-model="ruleForm.achievementFileName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="任务描述">
            <el-input type="textarea" class="input-item" v-model="ruleForm.taskDesc" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item style="padding: 20px 0">
            <el-button size="mini" @click="onCancel(false)">取消</el-button>
            <el-button type="primary" size="mini" @click="submitForm()">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { Tasktemplate, Businesstype } from '@/api/business.js';
import { BusinessFlow } from '@/api/projectAdministration.js';
import { findTreeNodePath } from '@/utils';
import approver from './components/approver';
import approverUserCc from './components/approverUserCc';
import approverRoleCc from './components/approverRoleCc';

export default {
  name: 'TasktemplateAdd',
  components: { approver, approverUserCc, approverRoleCc },
  props: {
    TasktemplateId: {
      default: undefined
    }
  },
  data () {
    return {
      isDisableGeneFlie: false,
      loading: false,
      hideAchievementFileName: false,
      isShowloading: false,
      businessCode: '',
      businesstypeTree: [],
      businesstypeId: [],
      flowEntrylist: [],
      businesstProps: {
        value: 'id',
        label: 'businessName',
        children: 'children',
        checkStrictly: true
      },
      ruleForm: {
        taskName: '',
        businessType: '',
        businessStage: 2,
        businessFlowId: '',
        achievementFlag: 1,
        examine: 1,
        achievementFileName: '',
        taskDesc: '',
        approver: [] // 审批流
      },
      rules: {
        taskName: [{ required: true, message: '请输入', trigger: 'blur' }],
        businessType: [{ required: true, message: '请选择', trigger: 'change' }],
        businessStage: [{ required: true, message: '请选择', trigger: 'blur' }],
        businessFlowId: [{ required: true, message: '请选择', trigger: 'change' }],
        achievementFlag: [{ required: true, message: '请选择', trigger: 'change' }],
        examine: [{ required: true, message: '请选择', trigger: 'change' }],
        achievementFileName: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    };
  },
  created () {
    this.formInit();
  },
  computed: {
    isEdit () {
      return this.TasktemplateId != null && this.TasktemplateId !== '';
    }
  },
  mounted () {
  },
  methods: {
    /**
     * 审批人选择
     */
    handleChooseapprover (approver) {
      this.ruleForm.approver = approver
    },
    // 抄送人选择
    handleChooseapproverUserCc (approver) {
      this.ruleForm.userCcList = approver
    },
    // 抄送角色选择
    handleChooseapproverRoleCc (approver) {
      this.ruleForm.roleCcList = approver
    },
    formInit () {
      let loadAllDatasource = [
        this.loadInfoDetail(),
        this.loadbusinesstypeTree(),
        this.loadflowWidgetData()
      ];
      Promise.all(loadAllDatasource).then(res => {
        if (!this.isEdit) return;
        this.businesstypeId = findTreeNodePath(this.businesstypeTree, this.ruleForm.businessType)
      }).catch(e => { });
    },
    /**
     * 任务模板详情
     */
    loadInfoDetail () {
      if (!this.isEdit) return;
      let params = {
        id: this.TasktemplateId
      }
      return new Promise((resolve, reject) => {
        Tasktemplate.detail(this, params).then(res => {
          this.ruleForm = res.data
          // this.ruleForm = {...res.data}
          this.businesstypeId = [res.data.businessType]
          this.loadflowWidgetData()
          this.$forceUpdate()
          resolve()
        }).catch(e => {
          reject(e);
        });
      });
    },
    loadStagewWidgetData () {
      this.ruleForm.businessFlowId = ''
      if (this.ruleForm.businessStage === 2) {
        this.isDisableGeneFlie = false
        this.ruleForm.achievementFlag = 1
        this.hideAchievementFileName = false
      } else {
        this.ruleForm.achievementFlag = 0
        this.isDisableGeneFlie = true
        this.hideAchievementFileName = true
      }
      this.loadflowWidgetData();
    },
    /**
     * 工作流程列表
     */
    loadflowWidgetData () {
      if (!this.ruleForm.businessStage || !this.ruleForm.businessType) return;
      let params = {
        businessStage: this.ruleForm.businessStage,
        businessType: this.ruleForm.businessType
      }
      return new Promise((resolve, reject) => {
        BusinessFlow.lists(this, params).then(res => {
          this.flowEntrylist = res.data
          resolve()
        }).catch(e => {
          reject(e);
        });
      });
    },
    /**
     * 业务类型信息表树形列表
     */
    loadbusinesstypeTree () {
      return new Promise((resolve, reject) => {
        Businesstype.tree(this).then(res => {
          this.businesstypeTree = res.data
          resolve()
        }).catch(e => {
          reject(e);
        });
      });
    },
    businessChange () {
      let info = this.businesstypeId
      let length = info.length - 1
      this.ruleForm.businessType = info[length]
      let checkedNodes = this.$refs['ref_business'].getCheckedNodes()
      this.businessCode = checkedNodes[0].data.businessCode
      this.$refs['ref_business'].dropDownVisible = false
      this.loadStagewWidgetData()
    },
    /**
     * 提交表单
     */
    submitForm () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.isShowloading = true;
          let params = {
            taskTemplete: this.ruleForm
          };
          if (this.isEdit) { // 修改
            return new Promise((resolve, reject) => {
              Tasktemplate.update(this, params).then(res => {
                this.$message({
                  showClose: true,
                  message: '修改成功！',
                  type: 'success'
                });
                this.onCancel(true);
              }).catch(e => {
                reject(e);
              });
            });
          } else { // 添加
            return new Promise((resolve, reject) => {
              Tasktemplate.add(this, params).then(res => {
                console.log(params, '添加任务模板')
                this.$message({
                  showClose: true,
                  message: '添加成功！',
                  type: 'success'
                });
                this.onCancel(true);
              }).catch(e => {
                reject(e);
              });
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    onCancel (isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess);
      }
    }
  }
}
</script>

<style scoped>
h3 {
  border-bottom: 1px solid #e9e9eb;
  padding: 0 0 10px;
}

.table_container {
  margin: 10px 0;
}

.form-single-info {
  display: flex;
  justify-content: center;
}

.el-form-info {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.el-form-info strong {
  margin: 0 10px;
}

.el-form-info .el-time-picker {
  width: 100%;
}
</style>
